<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>法狮龙家居生产制造数据大屏</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1971523_j01vigdin0o.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="viewport" style="height: 100%;width: 100%; margin-top: 0;padding:0.875rem ; box-sizing: border-box;">
        <div class="header">
            <h1>法狮龙家居生产制造数据大屏</h1>
            <div class="date" id="date"><img src="images/clock.png" alt="" class="clock"><span id="year"></span></div>
            <div class="workshop" id="workshop">工装车间</div>
        </div>
        <div class="main" style="flex: 1;">
            <!-- 本月计划 -->
            <div class="column" style="flex: .2;display: flex;">
                <!-- 合格率 -->
                <div style="flex: 1;padding-right: .833333rem;height: 100%;">
                    <div class="monitor panel" style="height: 100%;">
                        <div class="inner" style="padding: 0;">
                            <div style="display: flex;justify-content: space-around;align-items: center;height: 100%;">
                                <div style="display: flex;">
                                    <div><img src="images/order.png" alt=""></div>
                                    <div style="color: #FFFFFF;margin-left: 5px;">
                                        <p style="font-size: 16px;">本周计划</p>
                                        <p style="font-size: 28px;" id="week_all_num">500</p>
                                    </div>
                                </div>
                                <div style="display: flex;">
                                    <div><img src="images/order.png" alt=""></div>
                                    <div style="color: #FFFFFF;margin-left: 5px;">
                                        <p style="font-size: 16px;">本周完成</p>
                                        <p style="font-size: 28px;" id="week_finish_num">126</p>
                                    </div>
                                </div>
                                <div style="display: flex;width: 6rem;height: 100%;">
                                    <div id="waterChart" class="waterChart" style="width: 100%; height: 100%;"></div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div style="flex: 1;height: 100%;">
                    <div class="monitor panel" style="height: 100%;">
                        <div class="inner" style="padding: 0;">
                            <div style="display: flex;justify-content: space-around;align-items: center;height: 100%;">
                                <div style="display: flex;">
                                    <div><img src="images/order.png" alt=""></div>
                                    <div style="color: #FFFFFF;margin-left: 5px;">
                                        <p style="font-size: 16px;">本月计划</p>
                                        <p style="font-size: 28px;" id="month_all_num">1940</p>
                                    </div>
                                </div>
                                <div style="display: flex;">
                                    <div><img src="images/order.png" alt=""></div>
                                    <div style="color: #FFFFFF;margin-left: 5px;">
                                        <p style="font-size: 16px;">本月完成</p>
                                        <p style="font-size: 28px;" id="month_finish_num">763</p>
                                    </div>
                                </div>
                                <div style="display: flex;width: 6rem;height: 100%;">
                                    <div id="waterChart2" class="waterChart2" style="width: 100%; height: 100%;"></div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!--  待发货 已发货 -->
            <div class="column" style="display: flex;flex-direction: row;flex:1;margin-top: .833333rem;">
                <div style="padding-right: .833333rem; flex: 1;display: flex;flex-direction: column;">
                    <!-- 库存产品生产 -->
                    <div style="flex: 1;height: 100%;padding-bottom: .833333rem;">
                        <div class="monitor panel" style="height: 100%;">
                            <div class="inner">
                                <div class="tabs">
                                    <a href="javascript:;" data-index="0" class="active">待生产的库存产品（<span id="Amount1"
                                            style="color: #F4452B;font-size: 1rem;">4</span>款）</a>
                                </div>
                                <div class="content" style="display: block;">
                                    <div class="head">
                                        <span class="col">下达日期</span>
                                        <span class="col">型号名称</span>
                                        <span class="col">下达</span>
                                        <span class="col">已入库</span>
                                        <span class="col">生产进度</span>
                                        <span class="col">未完成</span>
                                    </div>
                                    <div class="marquee-view">
                                        <div class="marquee" id="marquee" style="overflow: hidden;height: 100%;">
                                            <!-- <div class="row ">
                                                <span class="col"></span>
                                                <span class="col"></span>
                                                <span class="col"></span>
                                                <span class="col"></span>
                                                <span class="col"><span class="border"><span class="strip"
                                                            style="color:#FFFFFF"></span></span></span>
                                                <span class="col"></span>
                                                <span class="icon-dot"></span>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 待生产的定制产品 -->
                    <div style="flex: 1;height: 100%;">
                        <div class="monitor panel " style="height: 100%;">
                            <div class="inner">
                                <div class="tabs">
                                    <a href="javascript:;" data-index="0" class="active">待生产的定制产品（<span id="Amount2"
                                            style="color: #F4452B;font-size: 1rem;">8</span>款）</a>
                                </div>
                                <div class="content" style="display: block;">
                                    <div class="head">
                                        <span class="col2">客户名称</span>
                                        <span class="col2">下单日期</span>
                                        <span class="col2">型号名称</span>
                                        <span class="col2">订货数</span>
                                        <span class="col2">待发数</span>
                                        <span class="col2">发货状态</span>
                                        <span class="col2">生产/采购状态</span>
                                    </div>
                                    <div class="marquee-view">
                                        <div class="marquee2" id="marquee2" style="overflow: hidden;height: 100%;">
                                            <!-- <div class="row">
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class="col2"></span>
                                                <span class=" icon-dot"></span>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex: .25;height: 100%;">
                    <!-- 生产需求 -->
                    <div class="monitor panel" style="height: 100%;">
                        <div class="inner">
                            <div class="tabs">
                                <a href="javascript:;" data-index="0" class="active">生产需求 （<span id="Amount3"
                                        style="color: #F4452B;font-size: 1rem;">12</span>）</a>
                            </div>
                            <div class="content" style="display: block;">
                                <div class="marquee-view">
                                    <div class="marquee3" id="marquee3"
                                        style="padding: .833333rem;overflow: hidden;height: 100%;">
                                        <!-- <div
                                            style="font-size: .75rem;color: #FFFFFF;margin-bottom: .833333rem;border: 1px solid #38AAFD;padding: .208333rem; display: flex;flex-direction: column;">
                                            <div style="display: flex;margin-bottom:.416667rem">
                                                <div style="flex:1;">
                                                    <p><span style="color:#F4452B;"></span></p>
                                                    <p style="margin-top:.416667rem;"><span>下单日期:<span></p>
                                                    <p style="margin-top:.416667rem;"></span></p>
                                                    <p style="margin-top:.416667rem;"><span>欠</span>:<span
                                                            style="font-size: 1rem;color:#FCB14C"></span>天
                                                    </p>
                                                </div>

                                                <div style="flex:.8;">
                                                    <p style="margin-bottom:.208333rem"><span>需求数</span>:<span
                                                            style="font-size: 2.083333rem;color:#FCB14C"></span>
                                                    </p>
                                                    <span>应发</span>:<span></span>&nbsp;
                                                    &nbsp;<span>实发</span>:<span></span>
                                                </div>
                                            </div>

                                            <div><span>型号名称</span>:<span></span></div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/md5.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js"></script>
<script src="./js/index.js"></script>
<!-- <script src="./js/china.js"></script> -->
<!-- <script src="./js/mymap.js"></script> -->

</html>